import React, {useState, useEffect} from 'react'

export default function CountFn1() {
    let [count, setCount] = useState(0) // 创建变量 赋初值 还有一个修改变量的函数
    let [food, setFood] = useState('rice')
    // componentDidMount+componentDidUpdate+componentWillUnmount
    // useEffect只有第一个参数 componentDidMount+componentDidUpdate
    // 第二个参数可以为空、可以是空数组、也可以是有内容的数组
    // 第二个参数是空数组  只有componentDidMount 初始化
    // 第二个参数是有内容的数组 初始化 + 这个数组就是依赖项 只有依赖变化时 才会调用useEffect
    // 第一个参数最后的返回值 componentWillUnmount
    useEffect(()=>{
        console.log(1);
        document.title = `当前点击次数-${count}次`
        return ()=>{
            // componentWillUnmount 写了return才有componentWillUnmount功能
            console.log(886);
        }
    }, [count, food])
    return (
        <div>
            <p>点击按钮，计数器的值就会增加-页面的title要显示当前点击的次数</p>
            <button onClick={() => setCount(count+1)}>{count}</button>
            <p>{food}</p>
            <button onClick={()=>setFood('meat')}>吃肉！</button>
        </div>
    )
}
